import { EllipsisOutlined, UploadOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable, TableDropdown } from '@ant-design/pro-table';
import { Button, Upload, Col, Row, Form, Input, Select } from 'antd';
import { useRef } from 'react';
import { request } from 'umi';
import style from './index.less';
const { Option } = Select;

const BatchImport: React.FC = () => {
  const actionRef = useRef<ActionType>();
  return (
    <div className={style.batchImport}>
      <Form
        name="complex-form"
        // onFinish={onFinish}
      >
        <Form.Item
          label="归属区域机构"
          style={{ marginBottom: 0 }}
          rules={[{ required: true }]}
        >
          <Form.Item
            name="year"
            rules={[{ required: true }]}
            style={{
              display: 'inline-block',
              width: 'calc(23% - 8px)',
              marginRight: 10,
            }}
            initialValue="rmb"
          >
            <Select disabled>
              <Option value="rmb">新加坡</Option>
            </Select>
          </Form.Item>
          <Form.Item
            name="year1"
            rules={[{ required: true }]}
            style={{
              display: 'inline-block',
              width: 'calc(23% - 8px)',
              marginRight: 10,
            }}
          >
            <Select>
              <Option value="rmb">通华香港</Option>
              <Option value="dollar1">通华金服</Option>
              <Option value="dollar2">海南数科</Option>
              <Option value="dollar3">通联支付</Option>
              <Option value="dollar4">通联跨境</Option>
            </Select>
          </Form.Item>
          <Form.Item
            name="year"
            rules={[{ required: true }]}
            style={{
              display: 'inline-block',
              width: 'calc(23% - 8px)',
              marginRight: 10,
            }}
          >
            <Select>
              <Option value="rmb">RMB</Option>
              <Option value="dollar">Dollar</Option>
            </Select>
          </Form.Item>
          <Form.Item
            name="year7"
            label=" - 归属合作方"
            style={{ display: 'inline-block', width: 'calc(23% - 8px)' }}
          >
            <Select
              showSearch
              filterOption={(input, option) =>
                (option!.children as unknown as string).includes(input)
              }
            >
              <Option value="rmb">test</Option>
              <Option value="dollar">合作方</Option>
            </Select>
          </Form.Item>
        </Form.Item>

        <Form.Item
          label="拓展机构"
          style={{ width: 'calc(24% - 8px)' }}
          rules={[{ required: true }]}
          name="tuozhan"
        >
          <Select
            showSearch
            filterOption={(input, option) =>
              (option!.children as unknown as string).includes(input)
            }
          >
            <Option value="rmb">test</Option>
            <Option value="dollar">合作方</Option>
          </Select>
        </Form.Item>
        <Form.Item>
          <Row>
            <Col>
              <Form.Item
                label="拓展机构"
                style={{ marginBottom: 0 }}
                rules={[{ required: true }]}
                name="shangchuan"
              >
                <Upload>
                  <Button icon={<UploadOutlined />}>点击上传</Button>
                </Upload>
              </Form.Item>
            </Col>
            <Col>
              <Form.Item style={{ marginBottom: 0 }}>
                <a href="https://test.allinpayhk.com/pay-web-admin/static/excel/merchant_cn.xls">
                  下载模板
                </a>
              </Form.Item>
            </Col>
          </Row>
        </Form.Item>
        <Form.Item
          label="录入结果"
          name="lururequest"
          style={{ width: 'calc(50% - 8px)' }}
        >
          <Input.TextArea />
        </Form.Item>
      </Form>
    </div>
  );
};

export default BatchImport;
